<template>
	
	<div class="studentImageContainer">
		
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title">陆小曼</div>		
			  <div class="albumbox">
			  	  <div class="imglist">
			  	  	  <div class="imgbox" v-for="item in images">
			  	  	  	<div class="img">
			  	  	  		<img :src="item.imgurl"/>
			  	  	  	</div>
			  	  	  	<div class="imgname">{{item.name}}</div>
			  	  	  	<div class="delimg" @click="delImg(item.id)">删除</div>
			  	  	  </div>
			  	  </div>
			  	  <div class="imgPagination ">
			  	  	<el-pagination
				      @current-change="curChange"			     
				      :page-size="pagesize"		      
				      layout="prev, pager, next, jumper"
				      :total="totalnum">
		    		</el-pagination>
			  	  </div>
			  </div>
		</el-dialog>
		
	</div>
	
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	export default{
		data(){
			return {
			    
				images:[
//					{id:'6',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"6"},
//					{id:'7',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"7"},
//					{id:'8',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"8"},
//					{id:'9',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"9"},
//					{id:'10',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"10"},
//					{id:'11',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"11"},
//					{id:'12',imgurl:'url(../../../../../fullcalendar/src/assets/img/lunar.png)',name:"12"}
				],
				pagesize:12,
				totalnum:100
			}
		},
		methods:{
			/**
			 * 关闭对话框
			 */
			handleClose(){
			   this.$store.dispatch('studentImage/hideimagePanel');	
			},
			/**
			 * 删除照片
			 */
			delImg(id){
				alert(id)
			},
			/**
			 * 当前页发生变化事件
			 */
			curChange(){
				alert(123)
			}
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.studentImage.imageDialog					 	
					})
		

      }
	}
</script>

<style lang="scss">
	.studentImageContainer{
		
		.albumbox{
			width:100%;
			height: 4.4rem;			
			.imglist{
				width:100%;
				height: 3.4rem;					
				.imgbox{
					width:15%;
					height:1.7rem;
					margin-left: 1.5%;
					float: left;
					padding: .1rem;				
					.img{
						width:100%;
						height: 1.1rem;
						img{
							width:100%;
							height: 1.1rem;
						}
						/*text-align: center;														
						background-size: cover;	
						background-position: center;
						background-position-x: center;*/
						
						
					}
					.imgname{
						width:100%;
						height: .2rem;
						text-align: left;
						line-height: .2rem;						
					}
					.delimg{
						width:100%;
						height: .2rem;
						text-align: left;
						line-height: .2rem;	
						cursor: pointer;
						color: blue;
					}
				}
			}
			.imgPagination{
				width:100%;
				height: .8rem;
				line-height: .8rem;				
				padding:.1rem;
			}
		}
		/**自定义对话框标题样式**/
		.panel_title{
			font-size: .3rem;
			text-indent: .2rem;
			height: .8rem;			
			line-height: .8rem;
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #F4F5F6;
			width:800px;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
	}
</style>